/*===============   定义字体 华康海报简体  ===========*/
@font-face {
    font-family: "HKHBJT";
    src: url("../font/HKHBJT.TTC");
}


/*===================  Reset css  ================*/
*{
    margin: 0;
    padding: 0;
    border:none;
}

img {
    border: none;
}

ul,
ol{
    list-style: none; }

input,
button,
select,
textarea {
    outline: none;
}

textarea {
    resize: none;
}

a {
    text-decoration: none;
}

a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    color: #fff;
}
/*===================  Reset css  ================*/

/*===========  浮动  ===========*/
.fl{
    float: left;
}
.fr{
    float: right;
}

/*清除浮动*/
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
/*===========  浮动  ===========*/

/*==================   版面整体样式   ==============*/
html,body{
    height: 100%;
}
.body{
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
    max-width: 10.24rem;
    min-height: 7.68rem;
    min-width: 3.2rem;
    margin: 0 auto;
    position: relative;
}


.warp{
    height: 7.68rem;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -3.84rem;
    margin-left: 0;
}

.container{
    height: 100%;
    color:#fff;
    font-size: 0.3rem;
}
.pages{
    width: 10.24rem;
    height: 100%;
    position: relative;

}
.pages>.page{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.pages>.page.current{
    opacity: 1;
    z-index: 1;
}
/*==================   版面整体样式    ==============*/


/*============  首页样式 ================ */
.homePage{
    background: url(../img/home_bg.png) no-repeat center;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.homePage>.playBtn,.homePage>.desc{
    width:2.02rem;
    height:0.95rem;
    background: url(../img/playBtn.png) no-repeat center;
    -webkit-background-size: 100%;
    background-size:  100%;
    position: absolute;
    top: 4.65rem;
    left: 50%;
    margin-left:  -1.01rem;
    z-index: 2;
    cursor: pointer;
}
.homePage>.desc{
    top: 5.88rem;
    background: url(../img/gameDescBtn.png) no-repeat center;
    -webkit-background-size:  100%;
    background-size:  100%;
}
/*============  首页样式 ================ */

/*============  游戏说明页样式 =====================*/
.game-description{
    background: url(../img/page_bg.png) no-repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
}
.game-description>.descPage_1,.game-description>.descPage_2{
    width: 100%;
    height:100%;
    background: url(../img/descPage1.png) no-repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
    position: relative;
}
.game-description>.descPage_1>.nextPageBtn{
    position: absolute;
    top: 5.75rem;
    left: 5.45rem;
    width: 1.44rem;
    height:0.72rem;
    background: url(../img/nextPageBtn.png) no-repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
    z-index: 1;
    cursor: pointer;
}
.game-description>.descPage_2{
    background: url(../img/descPage2.png) no-repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
    display: none;
}

.game-description>.descPage_2>.prevPageBtn{
    position: absolute;
    top: 5.75rem;
    left: 5.45rem;
    width: 1.44rem;
    height:0.72rem;
    background: url(../img/prevPageBtn.png) no-repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
    z-index: 1;
    cursor: pointer;
}
.game-description .playBtn{
    width: 1.41rem;
    height:0.69rem;
    background: url(../img/desc_playBtn.png) no-repeat center;
    -webkit-background-size: 100%;
    background-size: 100%;
    position: absolute;
    top: 5.75rem;
    left: 3.38rem;
    z-index: 1;
    cursor: pointer;
}
/*============  游戏说明页样式 =====================*/


/* ======================  游戏页样式  ====================*/
.game-container{
    background: url(../img/gamePage_bg.png) no-repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
    position: relative;
}
.game-container{
    float: left;
    width:1.3rem;
    height: 1.3rem;
    position: relative;
}

.game-container>.contrastData{
    font:0.5rem "HKHBJT";
    color: #A3FAAF;
    width: 0.94rem;
    height: 0.86rem;
    line-height: 0.86rem;
    text-align: center;
    /*background-color: darkolivegreen;*/
    /*opacity: 0.6;*/
    border-radius: 0.05rem;
    position: absolute;
    top: 0.25rem;
    left: 0.4rem
}
/*小怪兽动画的位置*/
.game-container>.monster>canvas{
    position: absolute;
    left: 0.21rem;
    display: none;
}
.monster>#canvas1,.monster>#canvas7{
    display: block;
    top: 0.14rem;
}
.monster>#canvas2,.monster>#canvas8{
    top: 1.26rem;
}
.monster>#canvas3,.monster>#canvas9{
    top: 1.5rem;
}
.monster>#canvas4,.monster>#canvas10{
    top: 0.52rem;
    left: 0.16rem;
}
.monster>#canvas5,.monster>#canvas11{
    top: 1.04rem;
}
.monster>#canvas6,.monster>#canvas12{
    top: 0.62rem;
 }

/*分数和凑数成功后的连线样式，位置*/
.game-container>.score{
    font:0.36rem "HKHBJT";
    color: #B2EDF3;
    position: absolute;
    bottom: 0.26rem;
    left: 50%
}
.game-container>.grid-container,#canvas17{
    font-size: 0.3rem;
    color: #ffffff;
    position: absolute;
    top: 0.82rem;
    left: 1.63rem;
}

#canvas17{
    width: 7rem;
    height: 5.76rem;
    display: none;
}
#canvas18{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

/* 5*6个格子的样式和位置*/
.game-container>.grid-container>.grids{
    width: 7rem;
    height: 5.76rem;
    position:relative;
}
.game-container>.grid-container>.grids .grid-cell{
    font:0.3rem "HKHBJT";
    color: #F1F7FC;
    width: 0.98rem;
    height: 0.98rem;
    line-height: 0.98rem;
    text-align: center;
    /*background-color: red;*/
    /*opacity: 0.4;*/
    border-radius: 0.05rem;
    cursor: pointer;
    position: absolute;
}
.game-container>.grid-container>.grids>.grid-cell.clicked{
    background: url(../img/yellowGrid.png) no-repeat center;
    -webkit-background-size: 100%;
    background-size:  100%;
}
/*塔流动画的位置*/
#canvas13{
    width: 1rem;
    position: absolute;
    top: 0.2rem;
    right: 0.4rem;
}

/*========= 正负分数的样式 ============*/
/*正真分数*/
.game-container .grid-cell>.fraction {
    width: 100%;
    height: 100%;
    position: relative;
}

.game-container .grid-cell>.fraction.plus>.fenzi{
    width: 0.98rem;
    height: 0.46rem;
    line-height: 0.46rem;
    position: absolute;
    top: 6%;
    left: 0;

}

.game-container .grid-cell>.fraction.plus >.fenshuxian{
    display: inline-block;
    width: 0.3rem;
    height: 0.04rem;
    /*background-color: #B2EDF3;*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.15rem;
    margin-top: -0.02rem;
}


.game-container .grid-cell>.fraction.plus>.fenmu{
    width: 0.98rem;
    height: 0.46rem;
    line-height: 0.46rem;
    position: absolute;
    bottom: 4%;
    left: 0;

}

/*负真分数*/
.game-container .grid-cell>.fraction.minus>.xishu{
    width: 0.38rem;
    text-align: right;
    position: absolute;
    left: 0;
}

.game-container .grid-cell> .fraction.minus >.fenzi {
    width: 0.6rem;
    height: 0.46rem;
    line-height: 0.46rem;
    position: absolute;
    top: 6%;
    right: 0.06rem;

}

.game-container .grid-cell> .fraction.minus >.fenshuxian{
    display: inline-block;
    width: 0.3rem;
    height: 0.04rem;
    /*background-color: #B2EDF3;*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.02rem;
    margin-top: -0.02rem;
}


.game-container .grid-cell> .fraction.minus >.fenmu{
    width: 0.6rem;
    height: 0.46rem;
    line-height: 0.46rem;
    position: absolute;
    bottom: 4%;
    right: 0.06rem;

}

    /*正的带分数*/
.game-container .grid-cell>.mixedNumber{
    width: 100%;
    height: 100%;
    position: relative;
}
.game-container .grid-cell>.mixedNumber.plus>.xishu{
    width: 0.36rem;
    text-align: right;
    position: absolute;
    left: 0;
}
.game-container .grid-cell> .mixedNumber.plus >.fenzi{
    width: 0.62rem;
    height: 0.46rem;
    line-height: 0.46rem;
    position: absolute;
    top: 6%;
    right: 0.06rem;

}
.game-container .grid-cell> .mixedNumber.plus >.fenshuxian{
    display: inline-block;
    width: 0.3rem;
    height: 0.04rem;
    /*background-color: #B2EDF3;*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.04rem;
    margin-top: -0.02rem;
}

.game-container .grid-cell> .mixedNumber.plus >.fenmu{
    width: 0.62rem;
    height: 0.46rem;
    line-height: 0.46rem;
    position: absolute;
    bottom: 4%;
    right: 0.06rem;

}

/*负的带分数*/
.game-container .grid-cell>.mixedNumber.minus>.xishu{
    width: 0.46rem;
    text-align: right;
    position: absolute;
    left: 0;
}
.game-container .grid-cell> .mixedNumber.minus >.fenzi {
    width: 0.48rem;
    height: 0.46rem;
    line-height: 0.46rem;
    position: absolute;
    top: 6%;
    right: 0.06rem;

}
.game-container .grid-cell> .mixedNumber.minus >.fenshuxian{
    display: inline-block;
    width: 0.3rem;
    height: 0.04rem;
    /*background-color: #B2EDF3;*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 0.04rem;
    margin-top: -0.02rem;
}

.game-container .grid-cell> .mixedNumber.minus >.fenmu{
    width: 0.48rem;
    height: 0.46rem;
    line-height: 0.46rem;
    position: absolute;
    bottom: 4%;
    right: 0.06rem;

}
/*========= 正负分数的样式 ============*/

/* ======================  游戏页样式  ====================*/



/*=================== 游戏结束页面样式  ====================*/
.endPage{
    background: url(../img/page_bg.png) no-repeat center center;
    -webkit-background-size: 100%;
    background-size: 100%;
    position: relative;
}
#canvas14,#canvas15{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
#canvas16{
    position: absolute;
    top: -0.4rem;
    left: 50%;
    margin-left: -1.95rem;
}
.endPage>.scoreArea{
    position: absolute;
    top : 0.44rem;
    left: 50%;
    margin-left: -2.375rem;
    width: 4.75rem;
    height: 6.35rem;
    background: url(../img/scoreArea.png) no-repeat center center;
    -webkit-background-size:  100%;
    background-size:  100%;
}

.endPage>.playAngie{
    width: 1.28rem;
    height:0.63rem;
    background: url(../img/playAngieBtn.png) no-repeat center;
    -webkit-background-size:  100%;
    background-size:  100%;
    position: absolute;
    left: 4.5rem;
    top: 5.84rem;
    z-index: 1;
    cursor: pointer;
}

.endPage>.score{
    font:0.4rem "HKHBJT";
    color: #B2EDF3;
    position: absolute;
    left:  4.8rem;
    top : 4.4rem;
    font-size: 0.5rem;
    font-weight: bold;
}
/*=================== 游戏结束页面样式  ====================*/